<template>
	<view>
		<!-- 顶部header区域 -->
		<MusicHead title="网易云音乐" :isShow="false"></MusicHead>
    
		<view class="content">
			<scroll-view scroll-y="true">
				<!-- 登录区域 -->
				<view class="login-cont">
					<view class="loginOut">
						<image :src="userInfo.avatarUrl ? userInfo.avatarUrl : '../../static/images/weidenglu-touxiang.png' "></image>
						<text>{{userInfo.nickname ? userInfo.nickname : '未登录'}}</text>
					</view>
					<view class="loginTo" @tap="gotoLogin" v-if="!isLogin">立即登录</view>
					<view class="loginTo" @tap="loginOut" v-else>退出登录</view>
				</view>
				<!-- 搜索框 -->
				<view class="search" @tap="gotoSearchPage">
					<text class="iconfont icon-Magnifier"></text>
					<input type="text" placeholder="搜索歌曲" />
				</view>
				<!-- 测一测----无逻辑功能 -->
				<view class="advertising">
					<image src="../../static/images/111_03.png"></image>
				</view>
        <view v-if="isLoading">
          <m-for-skeleton
              :avatarSize="200"
              :row="3"
              :loading="isLoading"
              isarc='square'
              v-for="(item,key) in 4"
              :title='false'
              :titleStyle='{}'
              :key="key">
          </m-for-skeleton>
        </view>
        
				<!-- 歌单列表 -->
          <view class="index-list" v-else>
            <!-- 歌单的每一项 -->
            <view class="index-list-item" v-for="(item,index) in toplist" :key="item.id" @tap="gotoMusicList(item.id)">
              <!-- 左侧图片部分 -->
              <view class="list-item-img">
                <image :src="item.coverImgUrl"></image>
                <text>{{item.updateFrequency}}</text>
              </view>
              <!-- 右侧文字部分 -->
              <view class="list-item-text">
                <view v-for="(item,index) in item.tracks" :key="index">{{index + 1}}. {{item.first}} -
                  {{item.second}}</view>
              </view>
            </view>
          </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import "@/common/iconfont.css"
  import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	import {
		topList
	} from "@/api/getListApi.js"
	export default {
		data() {
			return {
				// 用于存放首页榜单数据列表
				toplist: [],
				// 存储登录后的用户信息
				userInfo: {},
				isLogin: false,
        isLoading: true
			}
		},
		onLoad() {
			// 获取榜单数据列表
			topList().then(res => {
          if (res.length === 0) return
          this.toplist = res
          this.isLoading = false
				
			})

		},
		onShow(){
			// 获取用户信息
			let userInfo = uni.getStorageSync("userInfo")
			if(userInfo){
				this.isLogin = true
				this.userInfo = JSON.parse(userInfo)
				// console.log(this.userInfo)
			}
			
		},
		methods: {
			// 点击了立即登录按钮
			gotoLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 退出登录
			loginOut(){
				this.isLogin = false
				uni.removeStorageSync('cookie')
				uni.removeStorageSync('userInfo')
        this.userInfo = {}
			},
			// 点击了歌单
			gotoMusicList(id) {
				// 先判断是否有登录
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/login/login'
					})
          return
				}
				// 有登录则直接跳转至歌单对相应的列表页
				uni.navigateTo({
					url:"/pages/musiclist/musiclist?id=" + id
				})
			},
      gotoSearchPage(){
        uni.navigateTo({
        	url:'/pages/search/search'
        })
      }
		},
		components: {
      mForSkeleton
		}
	}
</script>

<style scoped>
	.content {
		box-sizing: border-box;
		padding: 0 34rpx 30rpx;
	}

	.login-cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 110rpx;
		/* background-color: #3967FF; */
	}

	.loginOut {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #bcbcbc;
	}

	.loginOut image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 24rpx;
	}

	.loginTo {
		width: 144rpx;
		height: 50rpx;
		border: 1px solid #ededed;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	/* 搜索框 */
	.search {
		display: flex;
		align-items: center;
		width: 100%;
		height: 70rpx;
		background-color: #f7f7f7;
		border-radius: 70rpx;
	}

	.search text {
		margin: 0 26rpx 0 28rpx;
		color: #b5b5b5;
	}

	.search input {
		flex: 1;
		color: #b5b5b5;
		font-size: 28rpx;
	}

	/* 测一测 */
	.advertising {
		width: 100%;
		height: 270rpx;
		margin: 26rpx 0;
	}

	.advertising image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	/* 歌单列表 */
	.index-list-item {
		display: flex;
		margin-bottom: 28rpx;
	}

	.list-item-img {
		position: relative;
		width: 215rpx;
		height: 215rpx;
	}

	.list-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.list-item-img text {
		position: absolute;
		left: 15rpx;
		bottom: 10rpx;
		font-size: 20rpx;
		color: #fff;
	}

	.list-item-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 28rpx 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.list-item-text view {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
